<script setup lang="ts">
// 导入子组件 SubScopeSlot，该组件包含多个带数据的插槽
import SubScopeSlot from "@/components/SubScopeSlot.vue";
</script>

<template>
    <!-- 使用 SubScopeSlot 组件，并填充其内部的各个插槽 -->
    <SubScopeSlot>
        <!--
            填充默认插槽（未命名的slot）：
            - v-slot:default="scope"：接收默认插槽传递的参数，存储在 scope 中
            - 这里将整个 scope 对象渲染出来，展示默认插槽传递的数据
        -->
        <template v-slot:default="scope">
            <p>{{ scope }}</p>
        </template>

        <!--
            填充具名插槽 header：
            - v-slot:header="scope"：接收 name 为 header 的插槽传递的参数，存储在 scope 中
            - 先渲染整个 scope 对象，再单独渲染 scope 中的 message 属性
        -->
        <template v-slot:header="scope">
            <p>{{ scope }}</p>
            <p>{{ scope.message }}</p>
        </template>

        <!--
            填充具名插槽 content（使用简写语法 #content）：
            - #content="{ user }"：通过解构赋值直接获取插槽传递的 user 对象（简化代码）
            - 分别渲染 user 对象的 name 和 age 属性
        -->
        <template #content="{ user }">
            <p>{{ user.name }}</p>
            <p>{{ user.age }}</p>
        </template>
    </SubScopeSlot>
</template>

<style scoped>
/* 局部样式区域，当前组件无需额外样式 */
</style>